// 引入顶部组件
import NavTop from "../components/navtop"
import Search from "../components/search"
import { getCate, getgoods } from "../request/app"
import { useEffect } from "react"

// 引入css
import '../assets/css/cate.css'

// 引入Ui框架
import {Link} from 'react-router-dom'
import React, { useState } from 'react';
import { Sidebar } from 'react-vant';

function Cate() {

    const [active, setActive] = useState(0);
    const [list, setlist] = useState([888])
    const [info, setinfo] = useState([])

    useEffect(() => {
        getCate().then(res => {
            console.log(res);
            setlist([...res.list])
        })
        getgoods({
            fid:1
        }).then(res => {
            console.log(res);
            setinfo([...res.list])
        })
       
    }, []) 
    
    function cli(id) {
        console.log(id);
        getgoods({
            fid:id
        }).then(res => {
            console.log(res);
            setinfo([...res.list])
        })
    }

    return (
        <div>
            <NavTop title='商品分类'></NavTop>
            <Search></Search>


                    <Sidebar
                        value={active}
                        onChange={(v) => {
                            setActive(v);
                        }}
                    >
                        {
                            list.map(item => {
                                return (<Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '0px 0px',}} title={item.catename} key={item.id} onClick={() => cli(item.id)}>
                                    <div className="right_box">
                                        <div>
                                            <h1>热门精选</h1>
                                            {
                                                info.map(item => {
                                                    return (<div key={item.id}>
                                                        <Link to={`/detail/${item.id}`}>
                                                            <div className='module'>
                                                                < img src={item.img} alt="" />
                                                                <div className='text'>
                                                                    <span >限时</span>
                                                                    <h2>{item.goodsname}</h2>
                                                                    <p>{item.description}</p >
                                                                    <div className="bot">
                                                                        <div className='inner'>
                                                                            <span>￥</span>
                                                                            <span>{item.price}</span><br/>
                                                                            <del>￥{item.market_price}</del>
                                                                            <p><span>99人已付款</span></p >
                                                                        </div>
                                                                        <p>加入购物车</p >
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </Link>
                                                    </div>

                                                    )
                                                })
                                            }

                                        </div>

                                    </div>
                                </Sidebar.Item>

                                )
                            })

                        }

                    </Sidebar>

                </div>

    )
}

export default Cate